<template>
  <view class="container">
    <!-- 顶部大图区域 -->
    <view class="header">
      <image class="header-img" src="https://example.com/forbidden-city.jpg" mode="aspectFill"></image>
      <view class="header-overlay">
        <text class="overlay-button">播放</text>
        <text class="overlay-button">图片</text>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="alert-section">
      <text class="alert-text">【必看】【预约规则】1、中国内地观众仅可预约...</text>
    </view>

    <!-- 景点信息 -->
    <view class="spot-info">
      <view class="spot-header">
        <view class="spot-name">故宫博物院 (5A)</view>
        <view class="spot-rating">
          <text class="rating-value">4.8</text>
          <text class="rating-details">16w+点评</text>
        </view>
      </view>
      <view class="spot-details">
        <text>开放时间：04/01-10/31 周二-周日 08:30-17:00</text>
        <text>北京市东城区景山前街4号</text>
      </view>
    </view>

    <!-- 门票 + 讲解信息 -->
    <view class="ticket-section">
      <view class="ticket-header">
        <text class="ticket-title">门票+人工讲解</text>
        <text class="ticket-subtitle">秀才说常规路线标准服务（含故宫）</text>
      </view>
      <view class="ticket-list">
        <!-- 成人票 -->
        <view class="ticket-item">
          <view class="ticket-info">
            <text class="ticket-type">成人票</text>
            <view class="ticket-condition">适用年龄：18周岁（含）-59周岁（含）</view>
          </view>
          <view class="ticket-price-wrapper">
            <text class="ticket-original-price">¥228</text>
            <text class="ticket-price">¥126</text>
            <button class="ticket-button">预订</button>
          </view>
        </view>
        <!-- 学生票 -->
        <view class="ticket-item">
          <view class="ticket-info">
            <text class="ticket-type">学生票</text>
            <view class="ticket-condition">适用年龄：18周岁（含）-59周岁（含）</view>
          </view>
          <view class="ticket-price-wrapper">
            <text class="ticket-original-price">¥228</text>
            <text class="ticket-price">¥106</text>
            <button class="ticket-button">预订</button>
          </view>
        </view>
        <!-- 老人票 -->
        <view class="ticket-item">
          <view class="ticket-info">
            <text class="ticket-type">老人票</text>
            <view class="ticket-condition">适用年龄：18周岁（含）-59周岁（含）</view>
          </view>
          <view class="ticket-price-wrapper">
            <text class="ticket-original-price">¥228</text>
            <text class="ticket-price">¥126</text>
            <button class="ticket-button">预订</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tickets: [
        {
          type: "成人票",
          condition: "适用年龄：18周岁（含）-59周岁（含）",
          originalPrice: 228,
          price: 126,
        },
        {
          type: "学生票",
          condition: "适用年龄：18周岁（含）-25周岁（含）",
          originalPrice: 228,
          price: 106,
        },
        {
          type: "老人票",
          condition: "适用年龄：60周岁（含）及以上",
          originalPrice: 228,
          price: 126,
        },
      ],
    };
  },
};
</script>

<style>
/* 容器 */
.container {
  background-color: #ffffff;
  padding: 20rpx;
}

/* 顶部图片部分 */
.header {
  position: relative;
  height: 300rpx;
  border-radius: 10rpx;
  overflow: hidden;
}
.header-img {
  width: 100%;
  height: 100%;
}
.header-overlay {
  position: absolute;
  bottom: 10rpx;
  right: 20rpx;
  display: flex;
  gap: 10rpx;
}
.overlay-button {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 28rpx;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
}

/* 提示信息 */
.alert-section {
  margin: 20rpx 0;
  background-color: #fff8e1;
  padding: 20rpx;
  border-left: 8rpx solid #ffc107;
}
.alert-text {
  font-size: 26rpx;
  color: #666;
}

/* 景点信息 */
.spot-info {
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.spot-header {
  display: flex;
  justify-content: space-between;
}
.spot-name {
  font-size: 34rpx;
  font-weight: bold;
}
.spot-rating {
  display: flex;
  align-items: center;
  gap: 5rpx;
}
.rating-value {
  color: #ff5722;
  font-size: 30rpx;
}
.rating-details {
  font-size: 24rpx;
  color: #999;
}
.spot-details {
  margin-top: 10rpx;
  color: #666;
  font-size: 26rpx;
}
.ticket-section {
  margin-top: 20rpx;
}
.ticket-header {
  margin-bottom: 10rpx;
}
.ticket-title {
  font-size: 30rpx;
  font-weight: bold;
}
.ticket-subtitle {
  font-size: 24rpx;
  color: #666;
}
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.ticket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ticket-info {
  flex: 1;
}
.ticket-type {
  font-size: 30rpx;
  font-weight: bold;
}
.ticket-condition {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}
.ticket-price-wrapper {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.ticket-original-price {
  font-size: 24rpx;
  text-decoration: line-through;
  color: #999;
}
.ticket-price {
  font-size: 30rpx;
  color: #ff5722;
}
.ticket-button {
  background-color: #ff5722;
  color: #fff;
  font-size: 26rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  border: none;
}
</style>
